<template>
 <div class="song_sheet">
  <Header title="歌单"></Header>
   <back-top></back-top>
   <div class="song_box">
     <div class="sudoku_item" v-for="(play,index) in playlists" :key="index" @click="goDetail(play.id)">
       <!--:style="{backgroundImage: 'url('+play.coverImgUrl+')'}"-->
       <div class="song_img">
         <img v-lazy="play.coverImgUrl" alt="">
       </div>
       <div class="song_number">
         <Icon style="color: #fff;" type="ios-headset-outline"/>
         <span>{{play.subscribedCount | changeNum}}</span>
       </div>
       <div class="song_label">
         <span v-for="(name,index2) in play.tags" :key="index2">{{name}}</span>
       </div>
       <div class="song_text">
         <p>{{play.name}}</p>
       </div>
     </div>
   </div>
  <Footer></Footer>
 </div>
</template>

<script>
import Footer from '../footer/Footer'
import Header from '../Header/Header'
import BackTop from '../backtop/src/main'
import {getUserList} from '../../api/node'

export default {
  name: 'PageTwo',
  data () {
    return {
      playlists: []
    }
  },
  // 设置缓存从哪个页面返回
  beforeRouteEnter: (to, from, next) => {
    if (from.name === 'songDetail') {
      to.meta.isBack = true
    }
    next()
  },
  activated () {
    if (!this.$route.meta.isBack) {
      getUserList().then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.playlists = res.playlists
          // console.log(this.playlists)
        }
      })
    }
    this.$route.meta.isBack = false
  },
  created () {
    getUserList().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.playlists = res.playlists
        // console.log(this.playlists)
      }
    })
  },
  methods: {
    goDetail (id) {
      // console.log(id)
      this.$router.push('/songDetail/' + id)
    }
  },
  components: {
    Footer,
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.song_sheet{
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  .song_box{
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .sudoku_item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 33.3333%;
      height: 170px;
      padding: 5px;
      position: relative;
      .song_number{
        width: 92%;
        height: 26px;
        background:#000;
        position: absolute;
        top: 10px;
        opacity: 0.5;
        text-align: right;
        span{
          color: #fff;
          font-size: 10px;
          line-height: 26px;
          margin-right: 10px;
        }
      }
      .song_label{
        width: 93%;
        height: 26px;
        background:#000;
        position: absolute;
        opacity: 0.5;
        bottom: 50px;
        span{
          color: #fff;
          font-size: 11px;
          line-height: 26px;
          margin-left: 5px;
        }
      }
      .song_img{
        width: 100%;
        height: 100px;
        background-size: 100% 100%;
        img{
          width: 110px;
        }
        img[lazy=loading] {
          height: 100px;
          margin: auto;
          background: url("../../assets/Image/lazy.png") no-repeat fixed center;
        }
      }
      .song_text{
        width: 100%;
        height: 50px;
        padding-top: 5px;
        p{
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
